<template>
  <div v-loading="loading" class="aaa">
    <el-row v-if="!canEdit" :gutter="15">
      <el-col :span="24">
        <el-row :gutter="15">
          <div v-for="data in detailsList" :key="data.code">
            <el-col :span="data.span" align="center">
              <div style="margin-top:20px;">
                <p>{{ data.tatol }}</p>
                <p style="font-size: 40px;color: #3A80EC;">{{ data.sum ? data.sum : 0 }}</p>
                <el-button v-if="data.name" type="primary" size="mini" @click="changeJumpRoute(data.code)">{{ data.name }}</el-button>
              </div>
            </el-col>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <el-row v-else :gutter="15">
      <el-col :span="19">
        <el-row :gutter="15">
          <div v-for="data in detailsList" :key="data.code">
            <el-col :span="data.span" align="center">
              <div style="margin-top:20px;">
                <p>{{ data.tatol }}</p>
                <p style="font-size: 40px;color: #3A80EC;">{{ data.sum ? data.sum : 0 }}</p>
                <el-button v-if="data.name" type="primary" size="mini" @click="changeJumpRoute(data.code)">{{ data.name }}</el-button>
              </div>
            </el-col>
          </div>
        </el-row>
      </el-col>
      <el-col :span="1">
        <el-divider direction="vertical" style="height:10rem" />
      </el-col>
      <el-col :span="3">
        <div class="button_group">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-button icon="el-icon-download" size="mini" @click="clickPrint('Competition')">打印参赛证</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" class="echart_box">
        <div>
          <span>机构参赛人数</span>
          <el-divider />
        </div>
        <div style="overflow: hidden">
          <pie-chart :default-data="institutionJoinSum" :width="width" :height="height" />
        </div>
        <div v-if="institutionJoinSum.series[0].data.length < 1" class="no_echart">暂无数据</div>
      </el-col>
      <el-col :span="12" class="echart_box">
        <div>
          <span>项目参赛人数</span>
          <el-divider />
        </div>
        <div>
          <bar-chart :default-data="projectJoinSum" :width="width" :height="height" />
        </div>
        <div v-if="projectJoinSum.series[0].data.length < 1" class="no_echart">暂无数据</div>
      </el-col>
      <!-- <el-col :span="12" class="echart_box">
        <div>
          <span>组别参赛人数</span>
          <el-divider />
        </div>
        <bar-chart :default-data="groupJoinSum" :width="width" :height="height" />
      </el-col> -->
      <el-col :span="12" class="echart_box">
        <div>
          <span>赛事时间参赛人数</span>
          <el-divider />
        </div>
        <div>
          <line-chart :default-data="matchTimeJoinSum" :width="width" :height="height" />
        </div>
        <div v-if="matchTimeJoinSum.series[0].data.length < 1" class="no_echart">暂无数据</div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import LineChart from './components/LineChart';
import PieChart from './components/PieChart';
import BarChart from './components/BarChart';
import {
  api_GET_EventsManagementCompetitionEntryDataCompetitionEntryDataStatisticsCompetitionId
} from '@/extend/api/gameswaggerApi/app.js';

export default {
  name: 'DataManage',
  components: {
    LineChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      width: '100%',
      height: '400px',
      loading: false,
      canEdit: true, // 判断是否C端申请的分站赛，是否需要显示
      institutionJoinSum: { // 机构参赛人数数据
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          confine: true
        },
        series: [
          {
            type: 'pie',
            name: '运动员人数',
            radius: '80%',
            center: ['50%', '50%'],
            data: [],
            avoidLabelOverlap: true,
            top: 10
          }
        ]
      },
      projectJoinSum: { // 项目参赛人数数据
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLabel: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#333'
              },
              show: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#333'
              }
            }
          }
        ],
        series: [
          {
            name: '参赛人数',
            type: 'bar',
            stack: 'vistors',
            barWidth: '50%',
            data: []
          }
        ]
      },
      groupJoinSum: { // 组别参赛人数数据
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['60xx', '80xx', '90xx', '100xx', '120xx'],
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#333'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#333'
              }
            }
          }
        ],
        series: [
          {
            name: '参赛人数',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: [80, 100, 121, 104, 105, 90, 100]
          }
        ]
      },
      matchTimeJoinSum: { // 赛事时间参赛人数数据
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          }
        },
        series: [
          {
            name: '参赛人数',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#d14a61',
                lineStyle: {
                  color: '#d14a61',
                  width: 2
                }
              }
            },
            data: [],
            animationDuration: 2800
          }
        ]
      },
      detailsList: [ // 机构数量和参赛人员
        {
          code: 'GameDataTeam',
          name: '机构明细',
          tatol: '机构数量',
          sum: '',
          span: 3,
          isShow: true
        },
        {
          code: 'GameDataInd',
          name: '个人明细',
          tatol: '参赛人员',
          sum: '',
          span: 4,
          isShow: true
        },
        {
          code: '',
          name: '',
          tatol: '参赛人次',
          sum: '',
          span: 4,
          isShow: true
        },
        {
          code: 'InsuranceAmount',
          name: '个人明细',
          tatol: '保险费金额',
          sum: '',
          span: 3,
          isShow: true
        },
        {
          code: 'LogisticOrder',
          name: '后勤明细',
          tatol: '后勤金额',
          sum: '',
          span: 4,
          isShow: true
        },
        {
          code: 'GameAmount',
          name: '金额明细',
          tatol: '赛事金额',
          sum: '',
          span: 4,
          isShow: true
        }
      ]
    };
  },
  // mounted() {
  //   window.onresize = () => {
  //     LineChart.resize();
  //     PieChart.resize();
  //     BarChart.resize();
  //   };
  // },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据管理首页数据
    getData() {
      var that = this;
      that.loading = true;
      const gameId = this.$route.params.id;
      api_GET_EventsManagementCompetitionEntryDataCompetitionEntryDataStatisticsCompetitionId(gameId).then(res => {
        that.canEdit = res.canEdit;
        that.detailsList[0].sum = res.delegationCount;
        that.detailsList[1].sum = res.athleteCount;
        that.detailsList[2].sum = res.entryCount;
        that.detailsList[3].sum = res.insuranceAmount ? that.formatMoney(res.insuranceAmount) : 0;
        that.detailsList[4].sum = res.logisticsAmount ? that.formatMoney(res.logisticsAmount) : 0;
        that.detailsList[5].sum = res.moneyCount ? that.formatMoney(res.moneyCount) : 0;
        // 机构参赛人数
        const statisticByDelegation = res.statisticByDelegation || [];
        that.institutionJoinSum.series[0].data = that.handleDelegation(statisticByDelegation);
        // 项目参赛人数
        const statisticByCategory = res.statisticByCategory || [];
        const category = that.handleCategory(statisticByCategory);
        that.projectJoinSum.xAxis[0].data = category.xAxis;
        that.projectJoinSum.series[0].data = category.yAxis;
        // 赛事时间参赛人数
        const statisticByDate = res.statisticByDate || [];
        const date = that.handleCategory(statisticByDate);
        that.matchTimeJoinSum.xAxis.data = date.xAxis;
        that.matchTimeJoinSum.series[0].data = date.yAxis;

        that.loading = false;
      }).catch(error => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error && error.error.message });
      });
    },
    // 处理机构参赛人数
    handleDelegation(delegation) {
      const delegationList = [];
      for (var i = 0; i < delegation.length; i++) {
        const obj = {
          value: 0,
          name: ''
        };
        var item = delegation[i];
        obj.name = item.item1;
        obj.value = item.item2;
        delegationList.push(obj);
      }
      return delegationList;
    },
    // 处理项目参赛人数、赛事时间参赛人数
    handleCategory(category) {
      const obj = {
        xAxis: [],
        yAxis: []
      };
      for (var i = 0; i < category.length; i++) {
        var item = category[i];
        obj.xAxis.push(item.item1);
        obj.yAxis.push(item.item2);
      }
      return obj;
    },
    // 个人列表和机构明细的路由跳转
    changeJumpRoute(code) {
      const { query, params } = this.$route;
      if (code === 'InsuranceAmount') {
        code = 'GameDataInd';
      }
      query.gameName = query.gameName || '';
      query.canEdit = this.canEdit || '';
      const isParentId = params.parentId;
      this.$router.push({
        name: isParentId ? 'League' + code : code,
        query: query
      });
    },
    // 打印跳转
    clickPrint(code) {
      const { query, params } = this.$route;
      query.gameName = query.gameName || '';
      query.isLeague = true;
      const isParentId = params.parentId;
      this.$router.push({
        name: isParentId ? 'League' + code : code,
        query: query
      });
    },
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.button_group{
  text-align: center;
}
.aaa {
  min-width: 1100px;
}
.aaa .el-divider--vertical{
  height:10rem;
}
.button_group button{
  width:220px;
  height:35px;
  margin: 10px 20px 10px 0;
  color: #3A80EC;
  border-radius: 7px;
  border-color: rgba(58, 128, 236, 1);
}
.echart_box {
  background:#fff;
  padding:16px 16px 0;
  margin-bottom:32px;
  position: relative;
}
.no_echart {
  width: 100%;
  height: 400px;
  line-height: 300px;
  text-align: center;
  color: #515a6e;
  font-size: 12px;
  position: absolute;
  top: 84px;
  z-index: 99;
  background: #fff;
}
</style>
